<!--renshuai-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="" prop="realName">
        <el-input
            v-model="queryParams.realName"
            placeholder="师傅姓名"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="mobileNo">
        <el-input
            v-model="queryParams.mobileNo"
            placeholder="手机号"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="address">
        <el-input
            v-model="queryParams.address"
            placeholder="居住地址"
            clearable
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="" prop="projName">
        <el-select v-model="queryParams.projCode" placeholder="服务类型" clearable style="width: 120px">
          <el-option v-for="(item ,index) in projList" :key="item.projCode" :label="item.projName" :value="item.projCode"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="itemCode">
        <el-cascader
            v-model="cateItemValues"
            :options="cateOptions"
            @change="handleChangeCate" clearable filterable  placeholder="服务产品"></el-cascader>
      </el-form-item>

      <el-form-item label="" prop="workAreaDistrictCode">
        <el-cascader
            v-model="districtValues"
            :options="districtOptions"
            @change="handleChangeDistrict" clearable filterable  placeholder="服务区域"></el-cascader>
      </el-form-item>
      <el-form-item label="" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="审核状态" clearable>
          <el-option v-for="(item,index) in auditStatusList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="acctStatus">
        <el-select v-model="queryParams.acctStatus" placeholder="账号状态" clearable>
          <el-option v-for="(item,index) in acctStatusList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['worker:list:add']"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="workerList" @selection-change="handleSelectionChange"
              height="calc(100vh - 320px)" max-height="calc(100vh - 320px)">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" width="50px" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="师傅姓名" align="center" prop="realName" :show-overflow-tooltip="true"/>
      <el-table-column label="手机号" align="center" prop="mobileNo" :show-overflow-tooltip="true" width="120"/>
      <el-table-column label="证件号" align="center" prop="idCardNo" :show-overflow-tooltip="true" width="200"/>
      <el-table-column label="证件照" align="center" prop="idCardFront" >
        <template slot-scope="scope">
          <el-image
              style="width: 50px; height: 50px; margin-bottom:-4px"
              :src="scope.row.idCardFront"
              :preview-src-list="[scope.row.idCardFront]">
            <div slot="error" class="el-image__error">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="居住地址" align="center" prop="address" :show-overflow-tooltip="true" width="200"/>
      <el-table-column label="审核状态" align="center" prop="auditStatus" width="90">
        <template slot-scope="scope">
          <dict-tag :options="auditStatusList" :value="scope.row.auditStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="账号状态" align="center" prop="acctStatus" width="90">
        <template slot-scope="scope">
          <dict-tag :options="acctStatusList" :value="scope.row.acctStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" prop="registerTime" :formatter="formatterTime" :show-overflow-tooltip="true"  width="100"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="110">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              v-hasPermi="['worker:list:view']">详情</el-button>

          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                       v-hasPermi="['worker:list:edit']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleUpdate" icon="el-icon-edit-outline"
                                v-hasPermi="['worker:list:edit']">修改</el-dropdown-item>
              <el-dropdown-item command="handleAudit" icon="el-icon-circle-check"
                                v-if="scope.row.auditStatus != 1"
                                v-hasPermi="['worker:list:audit']">审核</el-dropdown-item>
              <el-dropdown-item command="handleFreeze" icon="el-icon-circle-close"
                                v-if="scope.row.acctStatus == 1"
                                v-hasPermi="['worker:list:freeze']">冻结</el-dropdown-item>
              <el-dropdown-item command="handleUnFreeze" icon="el-icon-circle-check"
                                v-if="scope.row.acctStatus == 2"
                                v-hasPermi="['worker:list:unfreeze']">解冻</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

<!--          <el-button
              type="text"
              size="small"
              icon="el-icon-circle-check"
              @click="handleAudit(scope.row)"
              v-if="scope.row.auditStatus != 1 "
              v-hasPermi="['worker:list:audit']">审核</el-button>

          <el-button
              type="text"
              size="small"
              icon="el-icon-circle-close"
              @click="handleFreeze(scope.row)"
              v-if="scope.row.acctStatus == 1"
              v-hasPermi="['worker:list:freeze']">冻结</el-button>

          <el-button
              type="text"
              size="small"
              icon="el-icon-circle-check"
              @click="handleUnFreeze(scope.row)"
              v-if="scope.row.acctStatus == 2"
              v-hasPermi="['worker:list:unfreeze']">解冻</el-button>-->

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改话框 -->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body center :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :class=" !openIsEdit?'noEidt':'' " v-loading="submitLoading">
        <el-input type="hidden" v-model="form.pkId"></el-input>
        <el-row>
          <el-col :span="24" >
            <el-form-item label="师傅信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main">
                <el-col :span="12">
                  <el-form-item label="师傅姓名" prop="realName">
                    <el-input v-model="form.realName" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号" prop="idCardNo">
                    <el-input v-model="form.idCardNo" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="居住地址" prop="address">
                    <el-input v-model="form.address" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码" prop="mobileNo">
                    <el-input v-model="form.mobileNo" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="紧急联系电话" prop="urgentPhone">
                    <el-input v-model="form.urgentPhone" :readonly="!openIsEdit"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账号状态" prop="acctStatus">
                    <dict-tag :options="acctStatusList" :value="form.acctStatus"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="审核状态" prop="auditStatus">
                    <dict-tag :options="auditStatusList" :value="form.auditStatus"/>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="身份证" prop="acctStatus">
                    <el-image style="width: 100px; height: 100px" v-if="!openIsEdit"
                              fit="contain"
                              :src="form.idCardFront" :preview-src-list="[form.idCardFront]" >
                      <div slot="error" class="el-image__error">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                    <el-image style="width: 100px; height: 100px; margin-left: 10px" v-if="!openIsEdit"
                              fit="contain"
                              :src="form.idCardBack" :preview-src-list="[form.idCardBack]" >
                      <div slot="error" class="el-image__error">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>

                    <el-upload
                        v-if="openIsEdit"
                        class="thmb-uploader"
                        :action="uploadAction"
                        accept="image/jpg,image/png,image/jpeg"
                        :on-exceed="handleExceed"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :headers="headers"
                        :auto-upload="true" :file-list="fileList"
                        :on-success="handleSuccessImg"
                        :on-progress="handleProcessImg"
                        :on-remove="handleRemove"
                    >
                      <i class="el-icon-circle-close" v-if="form.idCardFront" @click.stop="handleRemove"></i>
                      <img v-if="form.idCardFront" :src="form.idCardFront" class="thmb-img ">
                      <i v-else class="el-icon-plus thmb-uploader-icon"></i>

                      <el-progress
                          :width="100"
                          v-if="imageUploading"
                          type="circle"
                          v-bind:percentage="imageUploadPercent"
                          class="thmb-img-progress"
                      ></el-progress>

                    </el-upload>

                    <el-upload
                        v-if="openIsEdit"
                        class="thmb-uploader"
                        :action="uploadAction"
                        accept="image/jpg,image/png,image/jpeg"
                        :on-exceed="handleExceed"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :headers="headers"
                        :auto-upload="true" :file-list="fileListBack"
                        :on-success="handleSuccessImgBack"
                        :on-progress="handleProcessImgBack"
                        :on-remove="handleRemoveBack"
                    >
                      <i class="el-icon-circle-close" v-if="form.idCardBack" @click.stop="handleRemoveBack"></i>
                      <img v-if="form.idCardBack" :src="form.idCardBack" class="thmb-img ">
                      <i v-else class="el-icon-plus thmb-uploader-icon"></i>

                      <el-progress
                          :width="100"
                          v-if="imageUploadingBack"
                          type="circle"
                          v-bind:percentage="imageUploadPercentBack"
                          class="thmb-img-progress"
                      ></el-progress>

                    </el-upload>

                  </el-form-item>
                </el-col>

              </el-main>
            </el-container>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" >
            <el-form-item label="服务区域" prop="workArea">
              <el-cascader
                  ref="fromDistrictOptions"
                  :props="{multiple:true}" style="width:100%"
                  v-model="districtValuesAry"
                  :options="districtOptions"
                  :disabled="!openIsEdit"
                  @change="handleChangeDistrictAry" clearable filterable  placeholder="服务区域"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" >
            <el-form-item label="服务技能" prop="workSkill">
              <el-cascader :props="{multiple:true}" style="width:100%"
                           ref="fromProjOptions"
                           v-model="projValuesAry"
                           :options="projOptions"
                           :disabled="!openIsEdit"
                           @change="handleChangeProjAry" clearable filterable  placeholder="服务技能"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>


<!--        <el-row>
          <el-col :span="24" >
            <el-form-item label="服务技能" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main" >
                <el-col :span="24" v-if="itemProj.checked" v-for="(itemProj,index) in workerProdProjTree" :key="index">
                  <el-form-item :label="itemProj.projName" >
                    <p  v-if="itemCate.checked" v-for="(itemCate,index) in itemProj.cates"
                        :key="index"
                        style="margin: 0px">
                      {{itemCate.cateName}}：
                      <el-tag v-if="item.checked"
                              v-for="(item,index) in itemCate.items"
                              :key="index" :disable-transitions="true"
                              style="margin-right: 5px"
                              type="primary">{{ item.itemName}}</el-tag>
                    </p>
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>-->

        <el-row>
          <el-col :span="24" >
            <el-form-item label="账户信息" class="group-title"></el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-container>
              <el-main class="grop-item-main" >
                <el-col :span="12">
                  <el-form-item label="余额" prop="auditStatus">
                    {{wallet.balance}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="保证金" prop="auditStatus">
                    {{wallet.deposit}}
                  </el-form-item>
                </el-col>
              </el-main>
            </el-container>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="openIsEdit" type="primary" @click="onSubmit()">提交</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWorkerById,
  getWorkerProdProj,
  listWorker,
  getWalletById,
  auditPass,
  auditNoPass,
  freeze,
  unfreeze, getWorkerWorkArea, getWorkerProjItemList, saveWorkerRelInfo
} from "@/api/worker/worker";
import {toYyyyMMdd} from "@/api/utils/dateUtil";
import {listProjAct} from "@/api/cms/prod/proj.js";
import {cateOptionsSelect, projOptionsSelect} from "@/api/cms/prod/cate.js";
import {districtOptionSelect} from "@/api/cms/district/district";
import "@/style/customer.scss";
import {uploadFile} from "@/api/upload";
import {getSystem, getToken} from "@/utils/auth";

export default {
  name: "WorkerList",
  data() {
    return {
      projList:"",
      cateOptions:[],
      cateItemValues:[],
      districtValues:[],
      districtValuesAry:[],
      districtOptions:[],
      projOptions:[],
      projValuesAry:[],
      auditStatusList:[
        {
          raw:{
            listClass:"default",
            cssClass:""
          },
          value:"",
          label:"全部"
        },
        {
          raw:{
            listClass:"warning",
            cssClass:""
          },
          value:"2",
          label:"未审核"
        },
        {
          raw:{
            listClass:"success",
            cssClass:""
          },
          value:"1",
          label:"通过"
        },
        {
          raw:{
            listClass:"danger",
            cssClass:""
          },
          value:"9",
          label:"不通过"
        },
      ],
      acctStatusList:[
        /*{
          raw:{
            listClass:"default",
            cssClass:""
          },
          value:"",
          label:"全部"
        },
        {
          raw:{
            listClass:"info",
            cssClass:""
          },
          value:"0",
          label:"注销"
        },*/
        {
          raw:{
            listClass:"success",
            cssClass:""
          },
          value:"1",
          label:"正常"
        },
        {
          raw:{
            listClass:"danger",
            cssClass:""
          },
          value:"2",
          label:"冻结"
        },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      workerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //打开时是否编辑
      openIsEdit:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        auditStatus: undefined,
        acctStatus:"1",
        realNameComp:"like",
        realName: undefined,
        mobileNoComp:"like",
        mobileNo:undefined,
        address:undefined,
        addressComp:"like",
        projName:undefined,
        itemCode:undefined,
        projCode:undefined,
        workAreaDistrictCode:undefined
      },
      // 表单参数
      form: {
      },
      formWorkAreaList:{},
      formProjItemList:{},
      submitLoading:false,
      // 表单校验
      rules: {
        realName:  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '师傅姓名不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required:true }
        ],
        address: [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '居住地址不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required:true }
        ],
        mobileNo: [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '手机号不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required:true }
        ],
        workArea: [
          {
            validator:(rule, value, callback)=>{
              if(!this.districtValuesAry|| this.districtValuesAry.length<=0){
                callback(new Error("不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '服务区域不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required:true }
        ],
        workSkill: [
          {
            validator:(rule, value, callback)=>{
              if(!this.projValuesAry||this.projValuesAry.length<=0){
                callback(new Error("不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '服务技能不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required:true }
        ],
      },
      workerProdProjTree:[],
      wallet:{},
      uploadAction:uploadFile,
      headers: {
        'access-token': getToken(), // 让每个请求携带自定义token 请根据实际情况自行修改
        'system-key': getSystem()
      },
      fileList:[],
      imageUploading:false,//图片是否上传中
      imageUploadPercent:0,//图片上传百分比
      fileListBack:[],
      imageUploadingBack:false,//图片是否上传中
      imageUploadPercentBack:0,//图片上传百分比
    };
  },
  created() {
    this.getList();
    this.getProjList();
    this.getCateOptions();
    this.getDistrictOptions();
    this.getProjOptions();
  },
  methods: {
    formatterTime(row,column){
      let data = row[column.property]
      return toYyyyMMdd(data);
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listWorker(this.queryParams).then(response => {
        this.workerList = response.data;
        this.total = Number(response.total);
        this.loading = false;
      });
    },
    /**
     * 查询服务项目
     */
    getProjList(){
      listProjAct().then(response =>{
        this.projList=response.data;
      });
    },
    getCateOptions(){
      cateOptionsSelect().then(data => {
        this.cateOptions = data
      });
    },
    getDistrictOptions(){
       districtOptionSelect().then( response => {
         this.districtOptions = response;
         console.log(response)
      });
    },

    getProjOptions(){
      projOptionsSelect().then(data => {
        this.projOptions = data
      });
    },

    /**
     * 详情按钮
     * @param row
     */
    handleView(row){
      this.openIsEdit=false;
      let pkId=row.pkId;
      let query={userId:pkId};
      getWorkerById(query).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "详细信息";

        /*getWorkerProdProj(query).then(response =>{
          this.workerProdProjTree=response.data;
        })*/

        getWorkerProjItemList(query).then(response =>{
          let proj=response.data;
          this.formProjItemList=proj;
          this.projValuesAry=[];
          for(let index in proj){
            let ary=[];
            ary.push(proj[index].projCode);
            ary.push(proj[index].cateCode);
            ary.push(proj[index].itemCode);
            this.projValuesAry.push(ary)
          }
        })

        getWalletById(query).then(response =>{
          this.wallet=response.data;
        })

        getWorkerWorkArea(query).then(response =>{
          let tmp=response.data;
          this.formWorkAreaList=tmp;
          this.districtValuesAry=[];
          for(let index in tmp){
            let ary=[];
            ary.push(tmp[index].provinceCode);
            ary.push(tmp[index].cityCode);
            if(!!tmp[index].districtCode
                && tmp[index].districtCode!=tmp[index].cityCode //小程序在设置服务区域时，如果城市没有区，则会将市的编码设置给区；但在此控件下这样的设置显示不出来
            ){
              ary.push(tmp[index].districtCode);
            }
            this.districtValuesAry.push(ary)
          }
        })

      });
    },

    handleUpdate(row){
      this.handleView(row);
      this.openIsEdit=true;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleUpdate":
          this.handleUpdate(row);
          break;
        case "handleAudit":
          this.handleAudit(row);
          break;
        case "handleFreeze":
          this.handleFreeze(row);
          break;
        case "handleUnFreeze":
          this.handleUnFreeze(row);
          break;
        default:
          break;
      }
    },

    handleAudit(row){
      this.$confirm('审核师傅：'+ row.realName +"/"+ row.mobileNo, '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '审核通过',
        cancelButtonText: '审核不通过',
        cancelButtonClass:'el-button--danger',
        type: 'warning',//type: 'success'
      }).then(() => {

        auditPass({userId:row.pkId}).then( response => {
          this.$modal.msgSuccess("操作完成");
        })

      }).catch(action => {
          //this.$message({ type: 'info',message: action === 'cancel'? '放弃保存并离开页面': '停留在当前页面' })
          if(action === 'cancel'){
            auditNoPass({userId:row.pkId}).then( response => {
              this.$modal.msgSuccess("操作完成");
            })
          }
      }).finally(()=>{
        this.getList();
      });
    },

    handleFreeze(row){
      this.$modal.confirm('是否确认冻结师傅：' + row.realName +"/"+ row.mobileNo +'？').then(function() {
        return freeze({userId:row.pkId});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作完成");
      }).catch(() => {});
    },
    handleUnFreeze(row){
      this.$modal.confirm('是否确认解冻师傅：' + row.realName +"/"+ row.mobileNo +'？').then(function() {
        return unfreeze({userId:row.pkId});
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作完成");
      }).catch(() => {});
    },

    /**
     * 新增按钮
     */
    handleAdd(){
      this.reset();
      this.open = true;
      this.openIsEdit=true;
      this.title = "新增";
    },


    // 取消按钮
    handleClose() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pkId: undefined,
        idCardFront:undefined,
        idCardBack:undefined,
      };
      this.projValuesAry=[];
      this.districtValuesAry=[];
      this.wallet={};
      this.resetForm("form");
    },
    onSubmit(){
      this.$confirm('确认提交吗？')
          .then(_ => {
            this.$refs["form"].validate( valid => {
              if (!valid){
                return;
              }
              let worker = this.form;
              let workAreaList = this.formWorkAreaList
              let projItemList= this.formProjItemList
              let data = {
                worker:worker,
                workAreaList:workAreaList,
                projItemList:projItemList
              }
              console.log(data)
              this.submitLoading=true;
              saveWorkerRelInfo(data).then(response => {
                this.$alert("操作成功");
                this.handleClose();
                this.handleQuery();
              }).finally(() =>{
                this.submitLoading=false;
              });
            })


          })
          .catch(_ => {});
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /**
     * 服务产品改变时候触发
     * @param value
     */
    handleChangeCate(value){
      this.cateItemValues=value;
      if(value){
        this.queryParams.itemCode=value[1];
      }
    },
    handleChangeDistrict(value){
      this.districtValues=value;
      if(value.length==3){
        this.queryParams.workAreaDistrictCode=value[2];
      }else{//无区的情况
        this.queryParams.workAreaDistrictCode=value[1];
      }
    },
    handleChangeDistrictAry(value){
      let nodesInfo = this.$refs['fromDistrictOptions'].getCheckedNodes();
      this.formWorkAreaList=[];
      for(let inx in nodesInfo){
        let node=nodesInfo[inx];
        if(!node.isLeaf){//是否叶子节点
          continue;
        }

        let codeArr=node.path;
        let lableArr=node.pathLabels;

        let province = lableArr[0]?lableArr[0]:undefined;
        let city = lableArr[1]?lableArr[1]:undefined;
        let district = lableArr[2]?lableArr[2]:undefined;
        let provinceCode = codeArr[0]?codeArr[0]:undefined;
        let cityCode = codeArr[1]?codeArr[1]:undefined;
        let districtCode = codeArr[2]?codeArr[2]:undefined;

        let object ={
          province:province,
          city:city,
          district:district,
          provinceCode:provinceCode,
          cityCode:cityCode,
          districtCode:districtCode
        }
        this.formWorkAreaList.push(object)
      }

      /*this.$nextTick(() => {
        let arrLabel = this.$refs["fromDistrictOptions"].presentTags

        for(let inx in arrLabel){
          let lable=arrLabel[inx];
          this.$refs["fromDistrictOptions"].separator
          console.log("text：",lable.text.split(
              this.$refs["fromDistrictOptions"].separator
          ));
          console.log("key:",lable)
        }

      });*/
    },
    handleChangeProjAry(value){
      let nodesInfo = this.$refs['fromProjOptions'].getCheckedNodes()
      this.formProjItemList=[];
      for(let inx in nodesInfo){
        let node=nodesInfo[inx];
        if(!node.isLeaf){//是否叶子节点
          continue;
        }

        let codeArr=node.path;
        let lableArr=node.pathLabels;

        let projCode=codeArr[0]
        let projName=lableArr[0]
        let cateCode=codeArr[1]
        let cateName=lableArr[1]
        let itemCode=codeArr[2]
        let itemName=lableArr[2]
        let object ={
          projCode:projCode,
          projName:projName,
          cateCode:cateCode,
          cateName:cateName,
          itemCode:itemCode,
          itemName:itemName
        }
        this.formProjItemList.push(object)
      }
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多上传一张图片`)
    },
    beforeAvatarUpload(file) {
      let isJPG = false
      let isLt10M = file.size / 1024 / 1024 < 10
      if (
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg'
      ) {
        isJPG = true
      } else {
        isJPG = false
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/jpeg/png 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传图片大小不能超过 10M!')
      }
      return isJPG && isLt10M
    },
    handleSuccessImg(response, file, fileList) {
      this.imageUploading=false;
      if (response.code === 200) {
        this.form.idCardFront =response.data.url;
      } else {
        this.$message.error('上传失败，请重试');
        this.form.idCardFront  = undefined;
      }
    },
    handleProcessImg(event, file, fileList) {    //注意在data中添加对应的变量名
      this.imageUploading = true
      this.imageUploadPercent = file.percentage.toFixed(0) * 1
    },
    handleRemove(file, fileList) {
      this.form.idCardFront = "";
    },

    handleSuccessImgBack(response, file, fileList) {
      this.imageUploadingBack=false;
      if (response.code === 200) {
        this.form.idCardBack =response.data.url;
      } else {
        this.$message.error('上传失败，请重试');
        this.form.idCardBack  = undefined;
      }
    },
    handleProcessImgBack(event, file, fileList) {    //注意在data中添加对应的变量名
      this.imageUploadingBack = true
      this.imageUploadPercentBack = file.percentage.toFixed(0) * 1
    },
    handleRemoveBack(file, fileList) {
      this.form.idCardBack = fileList;
    },

  }
};
</script>
<style lang="scss" scoped>
/***上传**/
::v-deep.thmb-uploader{
  display:inline-block;
  margin-right: 10px
}

::v-deep.thmb-uploader .el-upload {
  border: 1px dashed #D9D9D9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep.thmb-uploader .el-upload:hover {
  border-color: #409EFF;
}

.thmb-img {
  width: 100px;
  height: 100px;
  display: block;
}

.thmb-uploader:hover .el-icon-circle-close {
  visibility: visible;
}
.el-icon-circle-close {
  /*display: flex;
  float: right;
  margin-right: 6px;*/
  right: 2px;
  color: #959bcb;
  font-size: 30px;
  visibility: hidden;
  position: absolute;
  z-index: 99;
}
.thmb-img-progress{
  left: 0px;
  //right: 0px;
  //bottom:0px;
  //top:0px;
  position: absolute;
}
.thmb-uploader-icon {
  font-size: 28px;
  color: #8C939D;
  width: 100px;
  height: 100px;
  line-height: 108px;
  text-align: center;
}
</style>